<!--
 * @FileDescription 协议文档
 * @Author 杨宇翔
 * @Date 20220628 11:12:08
 * @LastEditors 杨宇翔
 * @LastEditTime 20220628 11:12:08
-->
<template>
    <div class="container" v-drag.clamp.offset>
        <div class="header" drag-trigger>
            <span>协议解析说明</span>
            <span class="material-icons" @click="ProtocolComponent.Default.ShowDocument.value = false">×</span>
        </div>
        <PDFViewer class="pdf-viewer" :Name="'PDFViewer'" :Url="ProtocolComponent.Default.DocumentUrl.value"
            :OnLoad="OnViewerLoad" />
    </div>
</template>

<script setup lang="ts">
import PDFViewer from '@components/PDFViewer/PDFViewer.vue';
import PDFViewerComponent from '@runtime/module/PDFViewer/PDFViewerComponent';
import { computed } from 'vue';
import { ProtocolComponent } from './InertialNavigationComponent';

const visibility = computed(() => ProtocolComponent.Default.ShowDocument.value ? 'visible' : 'hidden');

function OnViewerLoad(): void {
    PDFViewerComponent.Default.UpdateToolbar('PDFViewer',
        {
            PresentationMode: false,
            OpenFile: false,
            Print: false,
            Download: false,
            ViewBookmark: false,
        });
}
</script>

<style scoped>
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 124rem;
    height: 80rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;

    visibility: v-bind(visibility);
}

.header {
    width: 100%;

    padding: 2rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header>span:first-of-type {
    color: white;
    font-size: 2.4rem;
    font-weight: 500;
}

.header>.material-icons {
    color: #81859C;
    font-size: 3.6rem;
}

.container>span {
    padding-left: 3.4rem;
    width: 100%;

    color: #81859C;
    font-size: 2.4rem;
    font-weight: 500;
}

.pdf-viewer {
    width: 108rem;
    height: 64rem;

    border-radius: 2rem;
}
</style>